<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                width: 100vw;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            h1 {
                text-transform: uppercase;/* 字母变为大写字母 */
                letter-spacing: 3px;/* 字间距 */
                font-size: 15vw;
                transform: rotate(-10deg) skew(30deg);
                position: relative;
                color: rgba(0, 101, 253, 0.6);
                -webkit-text-stroke: 2px rgba(0, 101, 253, 0.6);/* 文字边框 */
                transition: all 1s;
            }
            /* 鼠标经过文字显示内陷效果 */
            h1:hover {
                /*先叠层白的，再叠层黑的，先叠的白会覆盖到黑，白的地方亮，黑的地方暗 */
                text-shadow: 3px 3px 6px #fff, 3px 3px 6px #fff, 0 0 0px #000;
            }
            /* 用双伪类实现文字的上半部分 */
            h1::before {
                content: 'aurora';
                color: rgb(255, 255, 255);
                position: absolute;
                top: 0;
                left: 0;
                clip-path: inset(0 0 50% 0);
                transition: all 1s;
                transform: rotateX(0deg) skew(0deg);
            }
            /* 鼠标经过文字上半部分文字折叠 */
            h1:hover::before {
                transform: rotateX(-30deg) skew(-30deg);
                color: rgb(243, 243, 243);
                text-shadow: 0 0 1px black;
            }
            /* 设置下半部分 */
            h1::after {
                content: 'aurora';
                color: rgb(255, 255, 255);
                position: absolute;
                top: 0;
                left: 0;
                clip-path: inset(50% 0 0 0);
                transition: all 1s;
                transform: rotateX(0deg) skew(0deg);
            }
            h1:hover::after {
                transform: rotateX(40deg) skewX(20deg);
                color: rgb(212, 212, 212);
                text-shadow: 0 0 1px black;
            }
        </style>
    </head>
    <body>
        <h1>aurora</h1>
    </body>
</html>
